<template>
  <page-header-wrapper :title="false">
    <a-card>
      <a-tabs type="card" v-model="tab" @change="onTabs">
        <a-tab-pane key="0" tab="未检"></a-tab-pane>
        <a-tab-pane key="3" tab="一检"></a-tab-pane>
        <a-tab-pane key="4" tab="二检"></a-tab-pane>
        <a-tab-pane key="1" tab="采纳"></a-tab-pane>
        <a-tab-pane key="2" tab="已注册"></a-tab-pane>
        <a-tab-pane key="5" tab="放弃"></a-tab-pane>
      </a-tabs>
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.id"
        :columns="checkColumns"
        :data="checkData"
      >
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`筛选${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            筛选
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
            重置
          </a-button>
        </div>
        <template slot="xu" slot-scope="text,record,index">{{index + 1}}</template>
        <template slot="category" slot-scope="text">
          {{categoryOpts[text]}}
        </template>
        <template slot="action" slot-scope="text,record">
          <a-button size="small" type="primary" style="margin-right:5px" @click="onModal(record.id)" ghost>更改状态</a-button>
<!--          <a-button size="small" type="danger" style="margin-right:5px" @click="doAction(2, record.id)"ghost>采纳</a-button>-->
          <a-button v-if="tab != 5" size="small" type="danger" style="margin-right:5px" @click="doAction(5, record.id)">不采纳</a-button>
        </template>
      </s-table>
      <a-modal
        title="选择商标状态"
        v-model="visible"
        width="200px"
        @ok="doAction(status, id)"
        @cancel="onCancel"
        :destroy-on-close="true"
      >
        <a-form-model-item label="状态">
          <a-select style="width:100%" placeholder="选择要更改的状态" v-model="status">
            <a-select-option v-for="(item,index) in statusOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import otherColumns from '@/columns/other'
import { changeStatus, getGoodTrademark, getTradeOpts } from '@/api/other'

export default {
  components: {
    STable
  },
  name: 'CheckTrademark',
  data () {
    return {
      checkColumns: otherColumns.list,
      checkData: parameters => {
        return getGoodTrademark(Object.assign(parameters, this.queryParam)).then(res => {
          this.categoryOpts = res.result.category
          return res.result
        })
      },
      categoryOpts: {},
      searchInput: null,
      searchText: '',
      searchedColumn: '',
      queryParam: {},
      tab: '0',
      visible: false,
      statusOpts: {},
      status: '',
      id: ''
    }
  },
  activated () {
    this.queryParam['filter[status]'] = 0
  },
  methods: {
    onTabs (key) {
      this.queryParam['filter[status]'] = key
      this.$refs.table.refresh(true)
    },
    doAction (type, ids) {
      const data = {}
      const arr = []
      arr[0] = ids
      data['status'] = type
      changeStatus(arr, data).then(res => {
        this.$refs.table.refresh(true)
        this.statusOpts = {}
        this.status = ''
        this.visible = false
      })
    },
    /**
     * o
     * @param selectedKeys
     * @param confirm
     * @param dataIndex
     */
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    /**
     * 清除
     * @param clearFilters
     */
    handleReset (clearFilters) {
      clearFilters()
      this.searchText = ''
    },
    onModal (id) {
      this.id = id
      getTradeOpts().then(res => {
        this.statusOpts = res.result.status_opts
        this.visible = true
      })
    },
    onCancel () {
      this.visible = false
    }
  }
}
</script>

<style scoped>

</style>
